<template>
  <div class="memberManage">
    <div class="title">系统设置 / 人员管理</div>
    <div class="table_body">
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="教师管理" name="first">
            <el-button class="add" type="primary" size="small" @click="add('teacher')">新增</el-button>
            <div class="event">
              <tableArea
                      :label-map="teacherLabelMap"
                      :table-data="teacherTableData"
                      :total="teacherTotal"
                      :query="teacherQueryList"
                      :page="teacherQueryList.page"
                      :limit="teacherQueryList.pagesize"
                      @pagination="handleTeacherPagination"
                      @edit="teacherEdit"
                      @delete="teacherDelete"
                      @addEdu="teacherAddEdu"
                      @addArt="teacherAddArticle"
                      @addAwa="teacherAddAward"
              >
              </tableArea>
            </div>
          </el-tab-pane>
          <el-tab-pane label="校友管理" name="second">
            <el-button class="add" type="primary" size="small" @click="add('schoolmate')">新增</el-button>
            <div class="event">
              <tableArea
                      :label-map="schoolmateLabelMap"
                      :table-data="schoolmateTableData"
                      :total="schoolmateTotal"
                      :query="schoolmateQueryList"
                      :page="schoolmateQueryList.page"
                      :limit="schoolmateQueryList.pagesize"
                      @pagination="handleSchoolmatePagination"
                      @edit="schoolmateEdit"
                      @delete="schoolmateDelete"
              ></tableArea>
            </div>
          </el-tab-pane>
          <el-tab-pane label="博士后管理" name="third">
            <el-button class="add" type="primary" size="small" @click="add('doctor')">新增</el-button>
            <div class="event">
              <tableArea
                      :label-map="doctorLabelMap"
                      :table-data="doctorTableData"
                      :total="doctorTotal"
                      :query="doctorQueryList"
                      :page="doctorQueryList.page"
                      :limit="doctorQueryList.pagesize"
                      @pagination="handleDoctorPagination"
                      @edit="doctorEdit"
                      @delete="doctorDelete"
              ></tableArea>
            </div>
          </el-tab-pane>
          <el-tab-pane label="研究生管理" name="forth">
                <el-button class="add" type="primary" size="small" @click="add('graduate')">新增</el-button>
                <div class="event">
                    <tableArea
                            :label-map="graduateLabelMap"
                            :table-data="graduateTableData"
                            :total="graduateTotal"
                            :query="graduateQueryList"
                            :page="graduateQueryList.page"
                            :limit="graduateQueryList.pagesize"
                            @pagination="handleGraduatePagination"
                            @edit="graduateEdit"
                            @delete="graduateDelete"
                    ></tableArea>
                </div>
          </el-tab-pane>


          <el-tab-pane label="相册管理" name="fifth">
            <el-button class="add" type="primary" size="small" @click="add('gallery')">新增</el-button>
            <div class="event">
              <tableArea
                      :label-map="galleryLabelMap"
                      :table-data="galleryTableData"
                      :total="galleryTotal"
                      :query="galleryQueryList"
                      :page="galleryQueryList.page"
                      :limit="galleryQueryList.pagesize"
                      @pagination="handleGalleryPagination"
                      @edit="galleryEdit"
                      @delete="galleryDelete"
              ></tableArea>
            </div>
          </el-tab-pane>
         <!-- <el-tab-pane label="教师首页" name="fifth">
            <span class="text_edit">正文编辑</span>
            <quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" />
            <button type="primary" @click="submit">提交</button>
          </el-tab-pane>-->
        </el-tabs>
      </template>
    </div>
    <el-dialog :title="teacherType === 'add' ? '新增教师信息' : '修改教师信息'" :visible.sync="showAddTeacher" @close="closeTeacher" width="60%">
      <add-teacher ref="teacherRef"  @updateTable="updateTableTeacher" :teacherInfo="addTeacherDate" :operateType="teacherType"></add-teacher>
    </el-dialog>
    <el-dialog :title="doctorType === 'add' ? '新增博士后信息' : '修改博士后信息'" :visible.sync="showAddDoctor" @close="closeDoctor" width="60%">
      <add-doctor ref="doctorRef"  @updateTable="updateTableDoctor" :doctorInfo="addDoctorDate" :operateType="doctorType"></add-doctor>
    </el-dialog>
    <el-dialog :title="schoolmateType === 'add' ? '新增校友信息' : '修改校友信息'" :visible.sync="showAddSchoolMate" @close="closeSchoolmate" width="60%">
      <add-school-mate ref="schoolmateRef"  @updateTable="updateTableSchoolmate" :schoolmateInfo="addSchoolmateDate" :operateType="schoolmateType"></add-school-mate>
    </el-dialog>
    <el-dialog :title="graduateType === 'add' ? '新增研究生信息': '修改研究生信息'" :visible.sync="showAddGraduate" @close="closeGraduate" width="60%">
      <add-graduate ref="graduateRef"  @updateTable="updateTableGraduate" :graduateInfo="addGraduateDate" :operateType="graduateType"></add-graduate>
    </el-dialog>
    <el-dialog :title="galleryType === 'add' ? '新增相册信息': '修改相册信息'" :visible.sync="showAddGallery" @close="closeGallery" width="60%">
      <add-gallery ref="galleryRef"  @updateTable="updateTableGallery" :galleryInfo="addGalleryDate" :operateType="galleryType"></add-gallery>
    </el-dialog>

      <el-dialog :title="'添加获奖经历'" :visible.sync="showAddAward" @close="closeAward" width="40%">
          <add-award ref="awardRef"  @closeDialog="closeAddAwardDialog" :awardInfo="teacherId"></add-award>
      </el-dialog>
      <el-dialog :title="'添加教育经历'" :visible.sync="showAddEducation" @close="closeEducation" width="40%">
          <add-education  ref="educationRef" @closeDialog="closeAddEducationDialog" :educationInfo="teacherId"></add-education>
      </el-dialog>
      <!--<el-dialog :title="'添加发表的文章'" :visible.sync="showAddArticle" @close="closeArticle" width="40%">
            <add-article ref="articleRef" @closeDialog="closeAddArticleDialog" :articleInfo="teacherId"></add-article>
      </el-dialog>-->



  </div>
</template>

<script>
  import tableArea from '../components/tableArea'
/*  import { quillEditor } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'*/
  import AddTeacher from "./teacherManage/addTeacher/index";
  import AddDoctor from "./doctorManage/addDoctor/index"
  import AddSchoolMate from "./schoolmateManage/addSchoolMate/index";
  import AddGraduate from "./graduateManage/addGraduate/index";
  import AddAward from "./teacherManage/addAward/index";
  import AddEducation from "./teacherManage/addEducation/index";
  import AddGallery from './galleryManage/addGallery/index';
 // import AddArticle from "./teacherManage/addArticle/index";
  import { getTeacherList,deleteTeacher,getTeacherItem,getAlumniList,deleteAlumni,getPostDoctorList,deletePostDoctor,getStudentList,deleteStudent,getGalleryList,deleteGallery } from '@/api/memberManage'
  export default {
    data() {
      return {
        activeName: 'first',
        content: '',
        editorOption: {},
        teacherType: 'add',
        doctorType: 'add',
        schoolmateType: 'add',
        graduateType: 'add',
        galleryType: 'add',
        showAddTeacher:false,
        showAddDoctor:false,
        showAddSchoolMate:false,
        showAddGraduate:false,
        showAddEducation: false,
       // showAddArticle: false,
          showAddAward: false,
        showAddGallery: false,
        addTeacherDate: {},
        addDoctorDate: {},
        addSchoolmateDate: {},
        addGraduateDate: {},
        addGalleryDate: {},
          teacherId: '',
          addEduId: '',
        teacherLabelMap: [
          // { label: '创建时间', prop: 'createdate' },
          { label: '教师姓名', prop: 'teachername' },
          { label: '职位', prop: 'role' },
          { label: '照片', prop: 'picture' },
          { label: '是否可见', prop: 'flag' },
          { label: '编辑/删除/添加', prop: 'operation' },
        ],
        teacherTableData: [],
        teacherTotal: 10,
        teacherQueryList: {
          page: 1,
          pagesize: 10,
        },
        schoolmateLabelMap: [
          // { label: '创建时间', prop: 'createdate' },
          { label: '校友姓名', prop: 'alumniname' },
          { label: '毕业年份', prop: 'year' },
          { label: '是否可见', prop: 'flag' },
          { label: '编辑/删除', prop: 'operation' },
        ],
        schoolmateTableData: [],
        schoolmateTotal: 10,
        schoolmateQueryList: {
          page: 1,
          pagesize: 10,
          year: '',
        },

        doctorLabelMap: [
          { label: '创建时间', prop: 'createdate' },
          { label: '博士后姓名', prop: 'name' },
          { label: '职位', prop: 'role' },
          { label: '照片', prop: 'picture' },
          { label: '是否可见', prop: 'flag' },
          { label: '编辑/删除', prop: 'operation' },
        ],
        doctorTableData: [],
        doctorTotal: 10,
        doctorQueryList: {
          page: 1,
          pagesize: 10,
        },

        graduateLabelMap: [
          // { label: '创建时间', prop: 'createdate' },
          { label: '研究生姓名', prop: 'studentname' },
          { label: '学位', prop: 'degree' },
          { label: '入学年份', prop: 'year' },
          { label: '是否可见', prop: 'flag' },
          { label: '编辑/删除', prop: 'operation' },
        ],
        graduateTableData: [],
        graduateTotal: 10,
        graduateQueryList: {
          page: 1,
          pagesize: 10,
          year: '',
          degree: ''
        },

        galleryLabelMap: [
          // { label: '创建时间', prop: 'createdate' },
          { label: '标题', prop: 'title' },
          { label: '照片', prop: 'picture' },
          { label: '日期', prop: 'date' },
          { label: '编辑/删除', prop: 'operation' },
        ],
        galleryTableData: [],
        galleryTotal: 10,
        galleryQueryList: {
          page: 1,
          pagesize: 10,
          date: '',
        },
      }
    },
    created() {
    },
    mounted() {
      this.getTeacherDataList();
      this.getSchoolmateDataList();
      this.getDoctorDataList();
      this.getStudentDataList();
      this.getGalleryDataList();
    },
    methods: {
      handleClick() {
       /* console.log(tab, event);*/
      },
      updateTableTeacher(){
        this.showAddTeacher = false
        this.getTeacherDataList()
      },
      updateTableDoctor(){
        this.showAddDoctor = false
        this.getDoctorDataList()
      },
      updateTableSchoolmate(){
        this.showAddSchoolMate = false
        this.getSchoolmateDataList()
      },
      updateTableGraduate(){
        this.showAddGraduate = false
        this.getStudentDataList()
      },
      updateTableGallery(){
        this.showAddGallery = false
        this.getGalleryDataList()
      },


      closeTeacher(){
        this.$refs.teacherRef.teacherForm = {
          teacherid: '',
          teachername: '',
          address: '',
          contact: '',
          role: '',
          position: '',
          pricture: '',
          biography: '',
          nterest: '',
          flag: "",
          educations:[],
          awards: [],
          articles: [],
        }
      },
      closeDoctor(){
        this.$refs.doctorRef.doctorForm = {
          id: '',
          name: '',
          picture: '' ,
          role: '',
          flag: '',
          createdate: '',
        }
      },
      closeSchoolmate(){
        this.$refs.schoolmateRef.schoolmateForm = {
          alumniid: '',
          alumniname: '',
          year: '',
          flag: '',
        }
      },
      closeGraduate(){
        this.$refs.graduateRef.graduateForm = {
          studentid: '',
          studentname: '',
          degree: '',
          year: '',
          flag: '',
        }
      },
      closeAward(){
        this.$refs.awardRef.experienceObj = {
         /* id: '',*/
          year: '',
          award: '',
        };
      },
      closeEducation(){
        this.$refs.educationRef.eduObj = {
          /*id: '',*/
          year: '',
          school: '',
          degree: '',
        };
      },
      closeGallery(){
        this.$refs.galleryRef.gallerForm = {
          /*id: '',*/
          title: '',
          date: '',
          picture: '',
        };
      },

      add(type){
        switch (type) {
          case 'teacher':
            this.teacherType = 'add'
            this.showAddTeacher = true
            break;
          case 'schoolmate':
            this.schoolmateType = 'add'
            this.showAddSchoolMate = true
            break;
          case 'doctor':
            this.doctorType = 'add'
            this.showAddDoctor = true
            break;
          case 'graduate':
            this.graduateType = 'add'
            this.showAddGraduate = true
            break;
          case 'gallery':
            this.galleryType = 'add'
            this.showAddGallery = true
            break;
        }
      },
      async getTeacherDataList(){
        const res = await getTeacherList(this.teacherQueryList)
        this.teacherTableData = res.rows.map((item)=>{
          item.operation =  ['编辑', '删除','添加获奖经历', '添加教育经历','添加发表文章']
          return item
        })
        this.teacherTotal = res.total
      },
      async getSchoolmateDataList(){
        const res = await getAlumniList(this.schoolmateQueryList)
        this.schoolmateTableData = res.rows.map((item)=>{
          item.operation =  ['编辑', '删除']
          return item
        })
        this.schoolmateTotal = res.total
      },
      async getDoctorDataList(){
        const res = await getPostDoctorList(this.doctorQueryList)
        this.doctorTableData = res.rows.map((item)=>{
          item.operation =  ['编辑', '删除']
          return item
        })
        this.doctorTotal = res.total
      },
      async getStudentDataList(){
        const res = await getStudentList(this.graduateQueryList)
        this.graduateTableData = res.rows.map((item)=>{
          item.operation =  ['编辑', '删除']
          return item
        })
        this.graduateTotal = res.total
      },
      async getGalleryDataList(){
        const res = await getGalleryList(this.galleryQueryList)
        this.galleryTableData = res.rows.map((item)=>{
          item.operation =  ['编辑', '删除']
          return item
        })
        this.galleryTotal = res.total
      },


      handleTeacherPagination(pages){
        this.teacherQueryList.page = pages.page
        this.getTeacherDataList()
      },
      handleSchoolmatePagination(pages){
        this.schoolmateQueryList.page = pages.page
        this.getSchoolmateDataList()
      },
      handleDoctorPagination(pages){
        this.doctorQueryList.page = pages.page
        this.getDoctorDataList()
      },
      handleGraduatePagination(pages){
        this.graduateQueryList.page = pages.page
        this.getStudentDataList()
      },
      handleGalleryPagination(pages){
        this.galleryQueryList.page = pages.page
        this.getGalleryDataList()
      },


      async teacherEdit(row){
        this.teacherType = 'edit'
        const res = await getTeacherItem({teacherid: row.teacherid})
        this.addTeacherDate = {
          teacherid: res.teacherid,
          teachername: res.teachername,
          address: res.address,
          contact: res.contact,
          role: res.role,
          position: res.position,
          picture: res.picture,
          biography: res.biography,
          flag: res.flag,
          interest: res.interest,
          educations: res.educations,
          awards: res.awards,
          articles: res.articles,
        }
        this.showAddTeacher = true
        console.log(res)
        console.log(this.addTeacherDate.educations)
      },
      schoolmateEdit(row){
        this.schoolmateType = 'edit'
        this.addSchoolmateDate = {
          alumniid: row.alumniid,
          alumniname: row.alumniname,
          year:row.year,
          flag: row.flag,
        }
        this.showAddSchoolMate = true
        console.log(row)
      },
      doctorEdit(row){
        this.doctorType = 'edit'
        this.addDoctorDate = {
          id: row.id,
          name: row.name,
          picture: row.picture,
          role: row.role,
          flag: row.flag,
          createdate: row.createdate,
        }
        this.showAddDoctor = true
        console.log(row)
      },
      graduateEdit(row){
        this.graduateType = 'edit'
        this.addGraduateDate = {
          studentid: row.studentid,
          studentname: row.studentname,
          degree: row.degree,
          year: row.year,
          flag: row.flag,
        }
        this.showAddGraduate = true
        console.log(row)
      },
      galleryEdit(row){
        this.galleryType = 'edit'
        this.addGalleryDate = {
          id: row.id,
          picture: row.picture,
          date: row.date,
          title: row.title,
        }
        this.showAddGallery = true
        console.log(row)
      },


      async handleTeacherDelete(data){
        await deleteTeacher({teacherid: data.teacherid})
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.getTeacherDataList()
      },
      teacherDelete(row){
        const _this = this
        this.$alert('确定删除吗', '警告', {
          confirmButtonText: '确定',
          callback: (action) => {
            console.log(action)
            if(action === 'confirm'){
              _this.handleTeacherDelete(row)
            }
          }
        });
      },
      async handleSchoolmateDelete(data){
        await deleteAlumni({alumniid: data.alumniid})
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.getSchoolmateDataList()
      },
      schoolmateDelete(row){
        const _this = this
        this.$alert('确定删除吗', '警告', {
          confirmButtonText: '确定',
          callback: (action) => {
            console.log(action)
            if(action === 'confirm'){
              _this.handleSchoolmateDelete(row)
            }
          }
        });
      },
      async handleDoctorDelete(data){
        await deletePostDoctor({id: data.id})
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.getDoctorDataList()
      },
      doctorDelete(row){
        const _this = this
        this.$alert('确定删除吗', '警告', {
          confirmButtonText: '确定',
          callback: (action) => {
            console.log(action)
            if(action === 'confirm'){
              _this.handleDoctorDelete(row)
            }
            this.$emit('updateTable')
          }
        });
      },
      async handleGraduateDelete(data){
        await deleteStudent({studentid: data.studentid})
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.getStudentDataList()
      },
      graduateDelete(row){
        const _this = this
        this.$alert('确定删除吗', '警告', {
          confirmButtonText: '确定',
          callback: (action) => {
            console.log(action)
            if(action === 'confirm'){
              _this.handleGraduateDelete(row)
            }
            this.$emit('updateTable')
          }
        });
      },
      async handleGalleryDelete(data){
        await deleteGallery({id: data.id})
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.getGalleryDataList()
      },
      galleryDelete(row){
        const _this = this
        this.$alert('确定删除吗', '警告', {
          confirmButtonText: '确定',
          callback: (action) => {
            console.log(action)
            if(action === 'confirm'){
              _this.handleGalleryDelete(row)
            }
          }
        });
      },

        teacherAddEdu(row){
            this.showAddEducation = true
            this.teacherId = row.teacherid
        },
        teacherAddArticle(row){
          console.log(row)
            /*this.showAddArticle = true
            this.teacherId = row.teacherid*/
          this.$router.push({
            path:'paperManage',
            query:{
              teacherid: row.teacherid
            }
          })
        },
        teacherAddAward(row){
          console.log(row)
            this.showAddAward = true
            this.teacherId = row.teacherid
        },
        closeAddEducationDialog(){
          this.showAddEducation = false
        },
        closeAddAwardDialog(){
          this.showAddAward = false
        },
        /*closeAddArticleDialog(){
          this.showAddArticle = false
        }*/
    },
    computed: {},
    components: {
      tableArea,
      AddGraduate,
      AddSchoolMate,
      AddDoctor,
      AddTeacher,
        AddAward,
        AddEducation,
      AddGallery,
       // AddArticle,
      /*quillEditor*/
    }
  }
</script>

<style lang="scss" scoped>
 .memberManage{
    width: 100%;
    .title{
      background:rgb(235,235,235);
      height: 50px;
      padding-left: 38px;
      padding-top: 22px;
      font-size: 18px;
      color: rgb(127,127,127);
    }
    .table_body{
      min-width: 100%;
      margin-top: 20px;
      padding-left: 38px;
      /deep/ .el-table th, .el-table tr {
        background:rgb(235,235,235);
      }
      /deep/ .el-tabs__item {
        padding: 0 40px;
        font-size: 16px;
      }
      /deep/ .el-button--medium {
        font-size: 16px;
        color: #D0021B;
        background: #cccccc;
        margin-left: 20px;
        margin-bottom: 10px;
      }
      /deep/ .el-table--enable-row-transition .el-table__body td {
        height: 58px;
      }
      /deep/ .el-table th>.cell {
        text-align: center;
      }
      /deep/ .el-table .cell {
        text-align: center;
        font-size: 16px;
      }
      /deep/ .el-pagination {
        padding: 22px 5px;
        text-align: center;
      }
      /deep/ .ql-editor {
        box-sizing: border-box;
        line-height: 300px;
      }
    }


  }
</style>
